<template>
  <div class="main_content_wrap" style="background-color:#f5f7fa;">
    <div class="main_content_title">
        服务器概览
    </div>
    <el-row :gutter="20">
        <el-col :span="8">
            <el-card style="min-height:130px;">
                <div style="margin-bottom:10px;font-size:12px;">CPU使用率</div>
                <!-- <el-progress :text-inside="false" :stroke-width="26" :percentage="cpuInfo.usedPercent"></el-progress> -->
                <div style="margin:0px auto;align-items: center;width:126px;">
                    <el-progress type="dashboard" :percentage="cpuInfo.usedPercent" :color="colors"></el-progress>
                </div>
                <div style="display:flex;margin-top:10px;">
                    <div>核心数：{{cpuInfo.cores}}</div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="min-height:130px;">
                <div style="margin-bottom:10px;font-size:12px;">内存使用率</div>
                <!-- <el-progress :text-inside="false" :stroke-width="26" :percentage="memInfo.usedPercent"></el-progress> -->
                <div style="margin:0px auto;align-items: center;width:126px;">
                    <el-progress type="dashboard" :percentage="memInfo.usedPercent" :color="colors"></el-progress>
                </div>
                
                <div style="display:flex;margin-top:10px;">
                    <div>总大小：{{memInfo.total}}GB</div>
                    <div style="margin-left:20px;">已使用：{{memInfo.used}}GB</div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card style="min-height:222px;">
                <div style="margin-bottom:10px;font-size:12px;">磁盘使用率</div>
                <template v-for="item in diskInfo">
                    <div style="display:flex;margin-top:10px;">
                        <div style="width:100px;">{{item.diskPart}}</div>
                        <div style="width:90%;margin-left:20px;"><el-progress :text-inside="false" :stroke-width="10" :percentage="item.usedPercent"></el-progress></div>
                    </div>
                </template>
            </el-card>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    data(){
        return{
            cpuInfo:{
                cores:0,
                usedPercent:0
            },
            memInfo:{
                total:0,
                used:0,
                usedPercent:0
            },
            diskInfo:[
                {
                    diskPart: "/",
                    total: 0,
                    usedPercent: 0
                }
            ],
            timer:null,
            colors: [
                // {color: '#f56c6c', percentage: 20},
                // {color: '#e6a23c', percentage: 40},
                // {color: '#5cb87a', percentage: 60},
                // {color: '#1989fa', percentage: 80},
                // {color: '#6f7ad3', percentage: 100},
                {color: '#e6a23c', percentage: 80},
                {color: '#f56c6c', percentage: 100},
            ]
        }
    },
    destroyed(){
        clearInterval(this.timer)
        this.timer = null
    },
    mounted(){
        this.loadData();
        this.timer = setInterval(()=>{
    	    this.loadData()
    	},10000)
    },
    methods:{
        loadData(){
            this.$http.get('/api/monitor').then(({
                    data: res
            }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                this.cpuInfo = res.data.cpuInfo
                this.memInfo = res.data.memInfo
                this.diskInfo = res.data.diskInfo
            }).catch(() => {})
        }
    }
}
</script>

<style scoped>
.main_wrap{
    background-color: #f5f7fa;
    padding:20px;
}
</style>